<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title_model {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0px 20px 0px 0px;
      }
    </style>
  </head>
  <body>
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/antd/4.10.3/antd.dark.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/antd/4.10.3/antd.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-router-dom/5.2.0/react-router-dom.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/redux/4.0.5/redux.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-redux/7.2.2/react-redux.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/redux-thunk/2.3.0/redux-thunk.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-transition-group/4.4.1/react-transition-group.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/antd/4.10.3/antd.min.js"></script>
    <script src="https://cdn.bootcss.com/EventEmitter/5.2.4/EventEmitter.min.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      const { useState } = React
      const { Modal } = antd
      function createShareIcon() {
        return <i class="fa fa-share" aria-hidden="true"></i>
      }
      function A1(props) {
        const [isModalVisible, setIsModalVisible] = useState(true)
        function handleOk() {
          setIsModalVisible(false)
        }
        function handleClose() {
          setIsModalVisible(false)
        }
        return (
          <Modal
            title={[
              <div className="title_model">
                <span>警告信息</span>
                <span>
                  <i className="fa fa-arrow-up" aria-hidden="true"></i>
                  <i className="fa fa-arrow-down" aria-hidden="true"></i>
                  {props.createShareIcon && props.createShareIcon()}
                </span>
              </div>
            ]}
            visible={isModalVisible}
            onOk={handleOk}
            onCancel={handleClose}
          >
            <p>1111</p>
          </Modal>
        )
      }
      let App = (
        <h1>
          <A1 createShareIcon={createShareIcon} />
          <A1 />
        </h1>
      )
      ReactDOM.render(App, document.getElementById('root'))
    </script>
  </body>
</html>
